// themes.js

import { THEME, ThemeType } from "@/types";

export const themes: { [key: string]: THEME } = {
  light: {
    rateIconFullColor: "#07c160",
    sliderTrackHeight: "4px",
    sliderButtonWidth: "20px",
    sliderButtonHeight: "20px",
    sliderActiveBackgroundColor: "#07c160",
    buttonPrimaryBorderColor: "#07c160",
    buttonPrimaryBackgroundColor: "#07c160",
    backgroundColor: "#FFFFFF",
    titleColor: "#000",
    baseColor: "#fff",
    popupBackgroundColor: "#FFFFFF",
    floatingPanelBackground: "#F2F2F4",
    collapseItemContentBackgroundColor: "#8CDDFF",
    backdropBackgroundColor: "rgba(0, 0, 0, 1)",
    badgeBackgroundColor: "red",
  },
  dark: {
    backgroundColor: "#131115",
    titleColor: "#ACB0B8",
  },
  purple: {
    backgroundColor: "#ffffff",
    titleColor: "#614281",
  },
  tiktok: {
    backgroundColor: "#20222F",
    titleColor: "#BB3466",
    nutuiNavbarBackground: "#1E232F",
    rateIconFullColor: "#07c160",
    sliderTrackHeight: "4px",
    sliderButtonWidth: "20px",
    sliderButtonHeight: "20px",
    sliderActiveBackgroundColor: "#07c160",
    buttonPrimaryBorderColor: "#07c160",
    buttonPrimaryBackgroundColor: "#07c160",
  },
  other: {
    backgroundColor: "#f6f6f6",
    titleColor: "#C17E9C",
  },
};

export const getTheme = (id: ThemeType): THEME => themes[id];
